<template>
	<view class="pug-distribute-box">
		
		<view class="pug-distribut-tt">
			<view class="txt">税前可提金额</view>
			<view class="price">￥<text class="num">0</text>.00</view>
			<navigator style="color: #3c9cff;font-size:20rpx;padding-top: 20rpx;" url="/pages/user/distributionRule">查看规则&说明</navigator>
		</view>
		
		<view class="pug-dis-bix">
			<view class="item">
				<text class="txt">本月收益</text>
				<text class="price">￥232.00</text>
			</view>
			<view class="item">
				<text class="txt">累计分销</text>
				<text class="price">100单</text>
			</view>
			<view class="item">
				<text class="txt">累计收益</text>
				<text class="price">￥3430.00</text>
			</view>
		</view>
		
		<view class="pug-distribute-body">
			<view class="tab-box">
				<u-tabs :list="list1" :itemStyle="{padding:'10px 25px'}" @change="handleTab"  :current="current"></u-tabs>
			</view>
			<view class="body">
				<view v-show="current==0">
					<!-- 重磅推荐 -->
				</view>
				<view v-show="current==1">
					<!-- 重磅推荐 -->
					<view class="page-attention">
						<view class="search">
							<u-search placeholder="输入搜索内容" :showAction="false" v-model="keyword"></u-search>
						</view>
						<view class="list">
							<view class="item" v-for="(item, index) in list" :key="index">
								<u-avatar :size="90" :src="item.avatar"></u-avatar>
								<view class="det">
									<u--text
										block
										color="#333"
										:size="14"
										blod
										:text="item.name"
									></u--text>
									<u--text :size="12" color="#333" :text="item.desc"></u--text>
								</view>
					
								<view><u-button type="success"  size="mini">互关</u-button></view>
								<view style="margin-left: 20rpx;"><u-button type="error"  size="mini">删除</u-button></view>
							</view>
						</view>
					</view>
				</view>
				<view v-show="current==2">
					<view class="page-attention2">
						<!-- 重磅推荐 -->
						<view class="list">
							<view class="item" v-for="(item, index) in list3" :key="index">
								<view class="month">{{item.month}}</view>
								<view class="det">
									<u--text :size="12" color="#999" :text="item.desc"></u--text>
								</view>
								<view class="time " v-if="item.status==0">申请中</view>
								<view class="time timeover" v-if="item.status==1">已提现</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="btnbox">
			<u-button type="primary">申请提现</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				current:2,
				list1:[{
					name: '推广内容',
					badge: {
						value: 5,
					}
				}, {
					name: '分销记录',
					badge: {
						value: 5,
					}
				}, {
					name: '体现记录',
					badge: {
						value: 5,
					}
				}],
				
				list: [
					{
						name: "Lisa",
						desc: "承蒙厚爱 多谢关注",
						avatar: "/static/images/avatar.png",
					},
					{
						name: "林小夏",
						desc: "和大家分享日常",
						avatar: "/static/images/avatar.png",
					},
					{
						name: "听风入夏",
						desc: "偷偷收藏温暖",
						avatar: "/static/images/avatar.png",
					},
					{
						name: "一颗糖",
						desc: "还没有简介",
						avatar: "/static/images/avatar.png",
					},
				],
				list3: [
					{
						month: "02/1月",
						desc: "承蒙厚爱 多谢关注",
						status:1
					},
					{
						month: "02/1月",
						desc: "和大家分享日常",
						status:1
					},
					{
						month: "02/1月",
						desc: "偷偷收藏温暖",
						status:1
					},
					{
						month: "02/1月",
						desc: "还没有简介",
						status:0
					},
				]
			}
		},
		methods: {
			handleTab(item){
				this.current = item.index;
			}
		}
	}
</script>

<style scoped lang="scss">
	
	.pug-distribute-box{
		background-color: #F5F7FA;
		height: 100vh;
		overflow: hidden auto;
		padding-bottom: 100rpx;
	}
	
	.pug-distribut-tt{
		padding:80rpx 0;
		background:#fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.txt{color:#999;font-size:24rpx;}
		.price{
			padding-top: 20rpx;
			font-weight: 800;
			color:#666;
			font-size:48rpx;
			.num{
				font-size:72rpx;
			}
		}
	}
	
	
	.pug-distribute-body{
		margin-top: 20rpx;
		.tab-box{
			display: flex;
			justify-content: center;
			background: #fff;
		}
		
		.body{
			background: #fff;
			margin-top: 1rpx;
		}
	}
	
	.btnbox{
		position: fixed;
		bottom:0;
		right:0;
		left:0;
		/* #ifdef MP-WEIXIN */
		padding-bottom: 20rpx;
		/* #endif */
		background:#3c9cff
	}
	
	.pug-dis-bix{
		display: flex;
		padding:20px;
		justify-content: space-around;
		border-top:1px solid #eee;
		background: #fff;
		
		.item{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			
			.txt{color:#999;font-size:28rpx;}
			.price{
				padding-top: 20rpx;
				font-weight: 600;
				color:#666;
			}
		}
		
	}
	
	
	.page-attention {
		margin-top: 20rpx;
		.search {
			padding: 40rpx;
	
			.cl-input {
				background-color: #f8f8f8;
				color: #fff;
				border-radius: 40rpx;
				border: 0;
			}
		}
	
		.list {
			padding: 0 40rpx;
	
			.item {
				display: flex;
				align-items: center;
				padding: 30rpx 0;
				border-bottom: 1px solid #f8f8f8;
	
				.det {
					flex: 1;
					margin: 0 20rpx;
				}
			}
		}
	}
	
	
	
	
	.page-attention2 {
		margin-top: 20rpx;
		background-color: #F5F7FA;
		height: 100vh;
	
		.list {
			padding: 0 20rpx;
	
			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 25rpx;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				border-bottom: 1px solid #f8f8f8;
				background:#fff;
				.month{
					font-weight: 800;
				}
				
				.det {
					flex: 1;
					margin: 0 20rpx;
				}
				
				.time{
					font-size:22rpx;
					font-weight: 800;
					color:#999;
				}
				
				.timeover{
					color:#4caf50;
				}
					
			}
		}
	}

</style>
